<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 精选题库 -->
      <el-card shadow="never">
        <!-- 表单部分 -->
        <search-header @search="search"> </search-header>
        <el-alert :closable="false" :title="`数据一共${total}条`" type="info" show-icon>
        </el-alert>
        <br />
        <!-- 表格数据 -->
        <el-table
          v-if="tableData.length"
          :data="tableData"
          stripe
          fit
           style="width: 100%"
        >
          <el-table-column
            prop="number"
            label="试题编号"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="70"
          ></el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            width="100"
          ></el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template v-slot="{ row }">
              {{ questionType[row.questionType && row.questionType - 1].label }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"

          ></el-table-column>
          <el-table-column prop="difficulty" label="难度" >
            <template v-slot="{ row }">
              {{ difficulty[row.difficulty && row.difficulty - 1].label }}
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            label="录入人"

          ></el-table-column>
          <el-table-column label="操作" min-width="200" fixed="right">
            <template v-slot="{ row }">
            <el-button type="primary" icon="el-icon-view" circle plain @click="preview(row.id)"></el-button>
              <el-button type="success" icon="el-icon-edit" circle plain @click="editQuestions(row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle plain @click="handDel(row)"></el-button>
            <el-button type="warning" icon="el-icon-check" circle plain @click="handAdd(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 翻页器 -->

        <div class="footer-pagination">
          <el-pagination
            layout="prev, pager, next, sizes, jumper"
            :background="true"
            :total="total"
            :page-size="queryObj.pagesize"
            :page-sizes="[5, 10, 15, 20]"
            :current-page="queryObj.page"
            @current-change="currentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>
    <articles-preview
      :articleDialog.sync="articleDialog"
      :titlePreview="titlePreview"
    >
      <!-- 预览 -->
    </articles-preview>
    <questions-check
      :cur-id="curId"
      :isQuestions.sync="isQuestions"
      :titlePreview="titlePreview"
      @getChoice="getChoice"
    >
      <!--审查  -->
    </questions-check>
    <preview-dialog ref="prevdialog" :showDialog.sync="showDialog"></preview-dialog>
  </div>
</template>

<script>
import {
  questionType,
  difficulty,
  chkType,
  publishType as publishState,
  status
} from '@/api/hmmm/constants.js'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
import ArticlesPreview from '../components/articles-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
import SearchHeader from '../components/common/search-header.vue'
import PreviewDialog from '../components/common/preview-dialog.vue'
export default {
  components: { ArticlesPreview, QuestionsCheck, SearchHeader, PreviewDialog },
  data () {
    return {
      zdata: '',
      row: null,
      showDialog: false,
      questionType,
      difficulty,
      chkType,
      publishState,
      status,
      formInline: {
        user: '',
        region: ''
      },
      activeName: 'first',
      total: 0,
      // 主页题库数据
      tableData: [],
      // 题库详情页数据
      titlePreview: {},
      queryObj: {
        pagesize: 10,
        page: 1
      },

      isDisabled: false,
      articleDialog: false,
      isQuestions: false,
      curId: -1
    }
  },
  computed: {},
  created () {
    this.getChoice()
    console.log(this.tableData)
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    currentChange (page) {
      console.log(page)
      this.queryObj.page = page
      this.getChoice()
    },
    handleSizeChange (val) {
      console.log(val)
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.getChoice()
    },
    // 预览
    async handPreview (row) {
      this.articleDialog = true
      const res = await detail(row)
      console.log(res)
      this.titlePreview = res.data
    },
    // 审查
    async handCheck (row) {
      this.isQuestions = true
      this.curId = row.id
    },
    // 上架
    handAdd (id, str) {
      this.$confirm('此操作将该题目加入精选，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choiceAdd({ id: id, choiceState: 1 })
          this.$message({ type: 'success', message: '加入精选成功!' })
          this.getChoice()
        })
        .catch()
    },
    // 删除
    handDel (row) {
      this.$confirm('您确定删除这道题吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message({ type: 'success', message: '删除成功!' })
          this.getChoice()
        })
        .catch()
    },
    // 渲染
    async getChoice () {
      const res = await list(this.queryObj)
      this.tableData = res.data.items.map((i) => {
        i.question = i.question.replace(/<.+?>/g, '')
        return i
      })
      this.tableData.map(item => {
        console.log(this.tableData[0].addDate)
        if (this.tableData[0].addDate) {
          // 创建一个日期对象
          const dateObj = new Date(item.addDate)

          // 获取年、月、日、小时、分钟、秒
          const year = dateObj.getFullYear()
          const month = ('0' + (dateObj.getMonth() + 1)).slice(-2)
          const day = ('0' + dateObj.getDate()).slice(-2)
          const hours = ('0' + dateObj.getHours()).slice(-2)
          const minutes = ('0' + dateObj.getMinutes()).slice(-2)
          const seconds = ('0' + dateObj.getSeconds()).slice(-2)

          // 拼接成目标格式的字符串

          item.addDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
        }
      })
      console.log(this.tableData)
      this.total = +res.data.counts
      this.id = res.data.items.id
    },
    // 搜索
    search (val) {
      console.log(val)
      this.queryObj = {
        ...val,
        pagesize: 10,
        page: 1
      }
      this.getChoice()
    },
    // 预览
    async preview (id) {
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs.prevdialog.getDetailList({ id })
      })
    },
    // 编辑,路由传参
    editQuestions (id) {
      this.$router.push(`new/${id}`)
    }
  }
}
</script>

<style scoped lang="scss">
.btn-header {
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  .explain {
    font-size: 12px;
    color: pink;
  }
}
.app-container {
  .el-button--medium.is-plain:focus {
    color: #F56C6C;
    background: #fef0f0;
    border-color: #fbc4c4;
  }
}
.btn-tabs {
  margin-bottom: 15px;
}
.footer-pagination {
  margin-top: 20px;
  text-align: right;
}
::v-deep .el-pagination__jump {
  margin-left: 0px;
}
.el-form-item {
  display: flex;
  justify-content: flex-end;
  .el-input {
    width: 200px;
  }
  .el-select {
    width: 200px;
  }
  // .btn-server{

  // }
}
</style>
